@extends('admin::layouts.master')

@section('title', __('MultiSeller::seller.edit'))

@section('content')
  <div id="seller-app-form" class="card" v-cloak>
    <div class="card-body">
      <el-form :model="form" :rules="rules" ref="form" label-width="140px">
        <el-tabs v-model="sellerTab">
          <el-tab-pane label="{{ __('MultiSeller::seller.seller_info') }}" name="seller">
            <div class="form-max-w">
              <el-form-item label="{{ __('MultiSeller::seller.store_name') }}" prop="store_name">
                <el-input v-model="form.store_name" placeholder="{{ __('MultiSeller::seller.store_name') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.email') }}" prop="email">
                <el-input v-model="form.email" placeholder="{{ __('MultiSeller::seller.email') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.password') }}" prop="password" v-if="!form.id">
                <el-input v-model="form.password" placeholder="{{ __('MultiSeller::seller.password') }}"></el-input>
              </el-form-item>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.telephone') }}" prop="telephone">
                <el-input v-model="form.telephone" placeholder="{{ __('MultiSeller::seller.telephone') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.company') }}" prop="company">
                <el-input v-model="form.company" placeholder="{{ __('MultiSeller::seller.company') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.description') }}" prop="description">
                <el-input v-model="form.description" placeholder="{{ __('MultiSeller::seller.description') }}"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.seller_group') }}" prop="seller_group_id">
                <el-select v-model="form.seller_group_id" placeholder="">
                  <el-option v-for="item in source.seller_group" :key="item.id" :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="{{ __('seller::register.seller_type') }}" prop="type">
                <el-select v-model="form.type" placeholder="">
                  <el-option label="{{ __('seller::register.type_company') }}" value="company"></el-option>
                  <el-option label="{{ __('seller::register.type_personal') }}" value="personal"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="form.type == 'company' ? '{{ __('seller::register.business_license') }}' : '{{ __('seller::register.id_card_photo') }}'" prop="id_card">
                <div class="position-relative d-inline-block">
                  <div class="set-product-img wh-70" @click="updateImages">
                    <img v-if="form.id_card" :src="thumbnail(form.id_card)" class="img-fluid" style="max-height: 100%">
                    <i v-else class="bi bi-plus fs-1 text-muted"></i>
                  </div>
                  <a :href="thumbnail(form.id_card)" style="right: -24px; top:0" class="position-absolute border lh-1 bg-white p-1 text-dark" target="_blank" v-if="form.id_card"><i class="bi bi-search"></i></a>
                </div>
              </el-form-item>
              <el-form-item :label="form.type == 'company' ? '{{ __('seller::register.tax_id') }}' : '{{ __('seller::register.id_number') }}'" prop="id_number">
                <el-input v-model="form.id_number" :placeholder="form.type == 'company' ? '{{ __('seller::register.tax_id') }}' : '{{ __('seller::register.id_number') }}'"></el-input>
              </el-form-item>
              <el-form-item label="{{ __('MultiSeller::seller.product_approve') }}" prop="product_approve">
                <el-switch v-model="form.product_approve" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item label="{{ __('common.status') }}" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('form')">{{ __('common.submit') }}</el-button>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
  </div>
@endsection

@push('footer')
  <script>
    let app = new Vue({
      el: '#seller-app-form',
      data: {
        sellerTab: 'seller',
        form: {
          id: @json($seller['id'] ?? null),
          store_name: @json($seller['store_name']),
          email: @json($seller['email']),
          telephone: @json($seller['telephone']),
          company: @json($seller['company']),
          description: @json($seller['description']),
          domain: @json($seller['domain']),
          product_approve: @json($seller['product_approve']),
          password: '',
          locale: @json(locale()),
          seller_group_id: @json($seller['seller_group_id']),
          status: @json($seller['status']) * 1,
          type: @json($seller['type']),
          id_card: @json($seller['id_card']),
          id_number: @json($seller['id_number']),
        },

        source: {
          seller_group: @json($seller_groups ?? []),
          countries: @json($countries ?? []),
          zones: []
        },

        rules: {
          store_name: [{required: true, message: "{{ __('common.error_required', ['name' => __('MultiSeller::seller.store_name')] ) }}", trigger: 'change'}, ],
          email: [
            {required: true, message: '{{ __('common.error_required', ['name' => __('common.email')] ) }}', trigger: 'change'},
            {type: 'email', message: '{{ __('MultiSeller::seller.error_email') }}' ,trigger: 'change'},
          ],

          seller_group_id: [{required: true, message: "{{ __('common.error_required', ['name' => __('MultiSeller::seller.seller_group')] ) }}", trigger: 'change'}, ],
          type: [{required: true, message: "{{ __('common.error_required', ['name' => __('seller::register.seller_type')] ) }}", trigger: 'change'}, ],
          id_card: [{required: true, message: "{{ __('common.error_required', ['name' => ''] ) }}", trigger: 'change'}, ],
          id_number: [{required: true, message: "{{ __('common.error_required', ['name' => ''] ) }}", trigger: 'change'}, ],
        },
      },

      methods: {
        submitForm(form) {
          const self = this;

          this.$refs[form].validate((valid) => {
            if (!valid) {
              this.$message.error('{{__('common.error_form')}}');
              return;
            }
            const url = self.form.id ? `sellers/{{ $seller['id'] }}` : 'sellers';
            const method = self.form.id ? 'put' : 'post';

            $http[method](url, self.form).then((res) => {
              layer.msg(res.message);
              location = '{{ admin_route("sellers.index") }}'
            })
          });
        },

        updateImages() {
          const self = this;
          $('#form-upload').remove();
          $('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" accept="image/*" name="file" /></form>');
          $('#form-upload input').click().change(function() {
            var formData = new FormData();
            formData.append('file', $(this)[0].files[0]);
            formData.append('type', 'seller_register_card');
            $http.post('{{ shop_route('file.store') }}', formData).then(res => {
              self.form.id_card = res.data.value;
            })
          });
        },
      }
    });

  </script>
@endpush
